<template>
	<div class="main">
		<el-form ref="filterData" :model="filterData" :rules="filterDataRules" auto-complete="on" label-position="left">
			<el-button type="info" @click="edit">编辑</el-button>
			<div class="dialog">
				<!--<div>
					<span class="dialog-name">商家登录账号：</span>
					<el-form-item prop="account">
						<span class="dialog-msg"><el-input v-model="filterData.account" placeholder="商家登录账号" disabled></el-input></span>
					</el-form-item>
				</div>-->
				<div>
					<span class="dialog-name">登录账号/电话：</span>
					<el-form-item prop="phone">
						<span class="dialog-msg"><el-input v-model="filterData.phone" placeholder="联系电话" disabled></el-input></span>
					</el-form-item>
				</div>
				<div>
					<span class="dialog-name">商家名称：</span>
					<el-form-item prop="name">
						<span class="dialog-msg"><el-input v-model="filterData.name" placeholder="商家名称" disabled></el-input></span>
					</el-form-item>
				</div>
				<div>
					<span class="dialog-name">所属地区：</span>					
					<el-form-item prop="area" v-if="notEdit==false">						
						<span class="dialog-msg"><el-cascader size="large" :options="options" v-model="filterData.areaArr" @change="handleChange"></el-cascader></span>
					</el-form-item>
					<el-form-item prop="areaArr" v-else>
						<span class="dialog-msg"><el-input v-model="checkArea" disabled></el-input></span>					
					</el-form-item>
				</div>
				<div>
					<span class="dialog-name">公司地址：</span>
					<el-form-item prop="address">
						<span class="dialog-msg"><el-input v-model="filterData.address" placeholder="公司地址" :disabled='notEdit'></el-input></span>
					</el-form-item>
				</div>				
				<div>
					<span class="dialog-name">合同编号：</span>
					<el-form-item prop="contractNum">
						<span class="dialog-msg"><el-input v-model="filterData.contractNum" placeholder="合同编号" disabled></el-input></span>
					</el-form-item>
				</div>
				<div class="btnBox">
					<el-button type="info" v-if='notEdit==true'>提交审核</el-button>
					<el-button type="info" @click='checkIn' v-else>提交审核</el-button>
					<el-button type="info" v-if='notEdit==true'>重置</el-button>
					<el-button type="info" v-else @click='reset'>重置</el-button>
				</div>
			</div>
		</el-form>
	</div>
</template>

<script>
	import { regionData,CodeToText} from 'element-china-area-data'
	import {busInfo,busUpdate} from '@/api/common'
	//import { Message, MessageBox } from 'element-ui'
	export default {
		created() {
			this.query();
		},
		computed:{
			checkArea:function(){
				let province = this.filterData.province == null?'':this.filterData.province
				let city = this.filterData.city == null?'':this.filterData.city
				let area = this.filterData.area == null?'':this.filterData.area
				return province + city + area;
			},
		},
		methods: {		
			handleChange (value) {
        		var ctt = CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]]
        		console.log(ctt)
        		this.filterData.province = CodeToText[value[0]];
        		this.filterData.city = CodeToText[value[1]];
        		this.filterData.area = CodeToText[value[2]];
      		},
      		
			checkIn() {
				console.log(this.filterData)
				this.$refs.filterData.validate(valid => {
					if(valid){						
						this.filterData.id = this.$store.state.user.busId						
						busUpdate(this.filterData).then(res =>{
							this.query();
							this.notEdit = true;
							this.$message.success(res.msg)
						}).catch(res =>{
							this.$message.error(res.msg)
						})
					}
				})
			},
			query() {				
				let busId = this.$store.state.user.busId;
				busInfo(busId).then(res =>{
					this.filterData = res.data;
				}).catch(res =>{
					this.$message.error(res.msg)
				})
			},
			edit(){
				this.notEdit = false;
			},
			reset(){
				this.filterData = {
					name: '', 				//商家名称
					address: '', 			//公司地址
					contractNum: '', 		//合同编号
					phone: '', 				//联系电话
					areaArr: [], 				//所属地区 	
					province: '', 					//省
					city: '', 						//市
					area: '', 						//区
				}
			},			
		},
		data() {
			const notNull = (rule, value, callback) => {
				if(value == '') {
					callback(new Error('输入不能为空！'))
				} else {
					callback()
				}
			}
			return {
				//主列表数据
				filterData: {
					name: '', 				//商家名称
					address: '', 			//公司地址
					contractNum: '', 		//合同编号
					phone: '', 				//联系电话
					areaArr: [], 				//所属地区    
					province: '', 					//省
					city: '', 						//市
					area: '', 						//区
				},
				filterDataRules:{
					/*name: [{
						required: true,
						trigger: 'blur',
						validator: notNull
					}],	*/				
					address: [{
						required: true,
						trigger: 'blur',
						validator: notNull
					}],
					/*contractNum: [{
						required: true,
						trigger: 'blur',
						validator: notNull
					}],*/
					/*phone: [{
						required: true,
						trigger: 'blur',
						validator: notNull
					}],*/
					area: [{
						required: true,
						trigger: 'blur',
						validator: notNull
					}],
				},
				notEdit: true,
				options: regionData, //地区选项
			}
		}
	}
</script>
<style scoped>
	.area-select-wrap {
		display: inline-block;
		margin-left: 0;
	}
	
	.area-select-wrap .area-select {
		margin-left: 0;
		vertical-align: middle;
		height: 40px
	}
	
	.dialog {
		border: 1px solid #ddd;
		padding: 20px;
		margin-top: 20px
	}
	
	.dialog .el-input {
		display: inline-block;
		width: 70%;
	}
	
	.dialog-name {
		width: 25%;
		display: inline-block;
	}
	
	.main {
		width: 100%;
		margin: 0 auto;
	}
	
	.btnBox {
		text-align: center;
	}
	.el-form-item {
		width:73%;
		display: inline-block;
	}
</style>